<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title site-demo-title">
        <li class="layui-this edit-client-title"></li>
    </ul>
    <div class="main-content">
        <div class="layui-form-item">
            <label class="layui-form-label i18n-client-name"></label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label i18n-client-key"></label>
            <div class="layui-input-inline">
                <input type="text" name="clientKey" autocomplete="off" placeholder="" class="layui-input">
            </div>
            <div class="layui-form-mid"><a class="layui-btn layui-btn-mini random-key random"></a></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn update"></button>
                <button class="layui-btn layui-btn-primary back"></button>
            </div>
        </div>
    </div>
</div>
<script>
    $(".edit-client-title").html($.i18n.prop('client.edit'));
    $(".i18n-client-name").html($.i18n.prop('client.name'));
    $(".i18n-client-key").html($.i18n.prop('client.key'));
    $("input[name='name']").attr("placeholder", $.i18n.prop('client.name.placeholder'));
    $("input[name='clientKey']").attr("placeholder", $.i18n.prop('client.key.placeholder'));
    $(".random").html($.i18n.prop('client.randomkey'));
    $(".update").html($.i18n.prop('public.submit'));
    $(".back").html($.i18n.prop('public.back'));
    $("input[name='name']").val(clientList[clientIndex].name);
    $("input[name='clientKey']").val(clientList[clientIndex].clientKey);

    $(".random").click(function () {
        $("input[name='clientKey']").val(uuid());
    });

    $(".update").click(function () {
        clientList[clientIndex]['name'] = $("input[name='name']").val();
        clientList[clientIndex]['clientKey'] = $("input[name='clientKey']").val();
        api_invoke("/config/update", clientList, function (data) {
            if (data.code == 20000) {
                layer.alert($.i18n.prop('public.notice.updatesuccess'), {title: $.i18n.prop('public.tips')}, function (index) {
                    layer.close(index);
                    location.reload();
                });
            }
        });
    });

    $(".back").click(function () {
        load_page("html/client/list.html");
    });

    function uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "";

        var uuid = s.join("");
        return uuid;
    }
</script>
